// 饼图
function canvasPie(data) {
    var option = {
        title:{
            text:data.title,
            x:'center'
        },
        tooltip:{
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:data.legend
        },
        series: [
            {
                name:data.name || data.title,
                type:'pie',
                radius: ['40%', '55%'],
                label: {
                    normal: {
                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            a: {
                                color: '#999',
                                lineHeight: 22,
                                align: 'center'
                            },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 16,
                                lineHeight: 33
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    }
                },
                data:data.series
            }
        ]
    }
    chartCanvas(data.id, option);
}

// 双环饼图
function canvasDoublePie(data)
{
    var option = {
        title:{
            text:data.title,
            x:'center'
        },
        tooltip:{
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:data.legend
        },
        series: [
            {
                name:data.series[0].name,
                type:'pie',
                selectedMode: 'single',
                radius: [0, '30%'],
                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:data.series[0].data
            },
            {
                name:data.series[1].name,
                type:'pie',
                radius: ['40%', '55%'],
                label: {
                    normal: {
                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            a: {
                                color: '#999',
                                lineHeight: 22,
                                align: 'center'
                            },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 16,
                                lineHeight: 33
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    }
                },
                data:data.series[1].data
            }
        ]
    }
    chartCanvas(data.id, option);
}

// 折线图
function canvasLine(data){
    var option = {
        title: {
            text: data.title
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:data.legend
        },
        grid: {
            left: 0,
            right: '2%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.category,
        },
        yAxis: {
            type: 'value'
        },
        series: data.series
    }
    chartCanvas(data.id, option);
}

// 默认柱状图
function canvasBar(data) {
    var option = {
        title:{
            text:data.title
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: data.legend
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis:  {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: data.category
        },
        series: [{
            name: data.legend[0],
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true
                }
            },
            data: data.series[0]
        },
            {
                name: data.legend[1],
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true
                    }
                },
                data: data.series[1]
            }]
    }
    chartCanvas(data.id, option);
}

// 柱状图之一条数据
function canvasBarOne(data){
    var option = {
        title:{
            text:data.title
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: data.legend
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis:  {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: data.category
        },
        series: [{
            name: data.legend[0],
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true
                }
            },
            data: data.series.data
        }]
    }
    chartCanvas(data.id, option);
}

function canvasBarMore(data) {
    var option = {
        title: {
            text: data.title,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: data.legend
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: data.category
        },
        series: data.series
    };
    chartCanvas(data.id, option);
}

// 正负条形图
function plusMinusBar(data) {
    var series = []
    var len = Object.getOwnPropertyNames(data.series).length

    for(var i=0;i < len + 1;i++){
        var item = {
            name:data.legend[i],
            type:'bar',
            label: {
                normal: {
                    show: true,
                    position: 'inside'
                }
            },
            data:data.series[i]
        }
        series.push(item)
    }
    var option = {
        title:{
            text:data.title
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data:data.legend
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'value'
            }
        ],
        yAxis : [
            {
                type : 'category',
                axisTick : {show: false},
                data : data.category
            }
        ],
        series : series
    };
    chartCanvas(data.id, option);
}

function chartCanvas(id, option){
    var myChart = echarts.init(document.getElementById(id));
    myChart.setOption(option)
}